<template>
  <div>
    <div class="task-list">
      <div class="task-list-right">
        <el-button icon="plus" size="small" circle style="margin-right: 10px" @click="addTask"></el-button>
        <span class="view-more-btn" >查看更多 >></span>
      </div>
    </div>
    <div class="task-list-content">
      <div v-for="(item, index) in data" :key="index">
        <SwipeMenu
            :item="item"
            @editItem="editItem"
            @deleteItem="deleteItem">
          <span>{{item.account}}</span>
          <el-divider></el-divider>
        </SwipeMenu>
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref, getCurrentInstance, reactive, onMounted} from 'vue';
import {ElCard, ElRow, ElCheckbox, ElLink, ElDivider, ElTag, ElButton} from 'element-plus';
import {useRouter, useRoute} from 'vue-router';
import {OKR} from '@/consts/Url';
import {RESPONSE_SUCCESS_CODE} from '@/consts/Codes';
import {ElMessage} from 'element-plus';
import SwipeMenu from '@/components/SwipeMenu';
import TableService from "@/service/TableService";


const router = useRouter();
const route = useRoute();

let data = reactive([]);

let taskViewTitle = ref("最近任务");
let day = ref(7);
const dialogVisible = ref(false);

onMounted(() => {
  loadTask();
});

async function loadTask() {
  try {
    let params = {
      page: 1,
      rows: 10
    };
    const response = await TableService.list(params);
    if (response.code === RESPONSE_SUCCESS_CODE.value) {
      data.length = 0; // 清空数组
      data.push(...response.data); // 更新数据
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error('获取数据失败');
  }
}

async function getCompletedTasks() {
  try {
    const response = await proxy.$request.get(OKR.RECENTLY_COMPLETE_TASK.value, {});
    if (response.code === RESPONSE_SUCCESS_CODE.value) {
      completeData.length = 0; // 清空数组
      completeData.push(...response.data); // 更新数据
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error('获取数据失败');
  }
}

async function viewMore() {
  dialogVisible.value = true;
  getCompletedTasks();
}

function addTask() {
  router.push({
    path: '/task/recently/add'
  });
}

async function completeTask(item) {
  try {
    const response = await proxy.$request.get(OKR.COMPLETE_TASK.value, {taskId: item.id});
    if (response.code === RESPONSE_SUCCESS_CODE.value) {
      removeItem(item.id);
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error('操作失败');
  }
}

function getDateClass(date) {
  const expireDateValue = new Date(date);
  const currentDate = new Date();
  return expireDateValue < currentDate ? 'expire-date expire-date-warn' : 'expire-date expire-date-normal';
}

function editItem(item) {
  console.log(item);
  router.push({
    path: '/objective/keyresult/task/edit',
    query: {
      objectiveId: item.objectiveId,
      keyResultId: item.keyResultId,
      taskId: item.id
    }
  });
}

async function deleteItem(item) {
  try {
    const response = await proxy.$request.get(OKR.DELETE_TASK.value, {taskId: item.id});
    if (response.code === RESPONSE_SUCCESS_CODE.value) {
      ElMessage.success('删除成功');
      removeItem(item.id);
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
}

function removeItem(id) {
  // 从 data 中移除已完成的任务
  const index = data.findIndex(task => task.id === id);
  if (index !== -1) {
    data.splice(index, 1); // 使用 splice 方法来移除数据
  }
}

async function changeTaskView() {
  if (taskViewTitle.value === "最近任务") {
    console.log(taskViewTitle.value);
    taskViewTitle.value = "今日任务";
    day.value = 1;
  } else {
    taskViewTitle.value = "最近任务";
    day.value = 7;
  }
  loadTask();
}

</script>

<style>

.task-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.task-list-right {
  display: flex;
  justify-content: space-around;
  margin-right: 10px;
}

.task-list-content {
  margin-left: 20px;
  flex-grow: 1;
  overflow-y: auto;
}

.task-list-footer{
  flex-shrink: 0;
  padding: 10px;
  background-color: #f9f9f9;
  text-align: right;
}

.task-radio {
  font-size: 14px;
  word-wrap: break-word; /* Added to allow word wrapping */
  white-space: normal; /* Added to ensure the text breaks and wraps */
}

.expire-date {
  font-size: 12px;
  margin-left: 20px;
}

.expire-date-warn {
  color: #ff0000;
}

.expire-date-normal {
  color: #111111;
}

.text-and-image {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.span-text {
  margin-right: 5px;
}

.dailog-task-title {
  font-size: 14px;
  margin-left: 20px;
}

.view-more-btn {
  color: #409EFF;
  cursor: pointer;
}
</style>
